<template lang="pug">
  .rate.page(v-if="isShow")
    CtrlBar(@closeBar='isShow = false')
    .rate-wrap.pos-a
      .rate-top.tac
        .title 评论
      Rate(ref="rateWrap")
      .rate-foot
        van-button(type="default", size="large", @click="submitRating") 提交
</template>

<script>
import Rate from '@/components/Rating/rate'
import CtrlBar from '@/components/CtrlBar'
export default {
  data() {
    return {
      isShow: false,
      orderItem: null
    }
  },
  methods: {
    showRating(item) {
      this.orderItem = item
      this.isShow = true
    },
    submitRating() {
      let rate = this.$refs.rateWrap
      if(!rate.message) {
        this.$vgo.tip('请填写评论内容')
        return
      }
      let options = {
        productId: this.orderItem.orderitems[0].fk_productid,
        orderId: this.orderItem.orderitems[0].fk_orderid,
        contents: rate.message,
        serviceScore: rate.serviceScore,
        productScore: rate.productScore,
        postScore: rate.postScore
      }
      this.$store.dispatch('orderRating', options)
      this.hide()
    },
    hide() {
      let rate = this.$refs.rateWrap
      rate.serviceScore = null
      rate.productScore = null
      rate.postScore = null
      rate.message = ''
      this.isShow = false
    }
  },
  components: {
    Rate,
    CtrlBar
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
.rate
  background-color: rgba($black, .5)
  .rate-wrap
    bottom: 0
    left: 0
    right: 0
    background: $white
    .rate-top
      .title
        padding: 10px 0
        line-height: 30px
        font-size: 15px
        font-weight: bold
        color: $black-light
        border-bottom: 1px solid #ddd
    .rate-body
      .rate-box
        padding: 20px
        .rate-item
          display: flex
          margin-bottom: 10px
          & > div
            flex: 1
          .rate-label
            display: block
            width: 60px
            flex: 0 0 60px
            font-size: 13px
      .rate-foot
        margin-top: 10px
</style>

